<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>抽签评分程序</title>
    <script src="vue.js"></script>
    <script src="lodash.min.js"></script>
    <script src="axios.js"></script>
    <script src="vue-resource.min.js"></script>
    <script src="jquery-1.9.1min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            color: white;
        }

        .list-complete-item {
            transition: all 1s;
            display: inline-block;
            border: 1px solid #ccc;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center
        }
        .pw {
            transition: all 1s;
            display: inline-block;
            border: 1px solid #ccc;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center
        }

        .draw-bg {
            background-color: rgba(255, 221, 0, 0.89);
            transform: scale(1.5)
        }
        .pw1 {
            background-color: rgba(255, 221, 0, 0.89);
            transform: scale(1.5)
        }
        .list-complete-enter,
        .list-complete-leave-to {
            opacity: 0;
            transform: translateY(30px);
        }

        .list-complete-leave-active {
            position: absolute;
        }

        .draw {
            height: 100px;
        }

        button {
            padding: 5px 31px;
            margin: 20px;
        }

        li {
            float: left
        }

        .draw-list span {
            display: inline-block;
            padding: 10px;
            background: red;
            color: #fff
        }

        a {
            text-decoration: none; /* 取消链接下划线 */
            color: inherit; /* 保持与父元素相同的字体颜色 */
        }
        button{
            color: #1b1e21;
        }
    </style>
</head>

<body style="background-image: url('./banner.jpg');background-repeat: no-repeat;">
<div style="width: 29rem;margin: 0 auto;">
    <h1 style="text-align: center;color: #e92a09f2;margin-top: 1rem;"><a href="index.php?func=link" target="_blank">2024内容数字中心年度规划汇报</a></h1>
    <hr style="margin: 1rem 0;">
</div>

<div id="list-complete-demo" class="demo" style="width: 41rem;margin: 0 auto;text-align: center;">
    <button v-on:click="start">抽选</button>
    <button v-on:click="end">停</button>
    <button v-on:click="init">初始化</button>
    <div class="draw-list">
        <span v-for="item in target">{{item}}</span>
    </div>
    <transition-group name="list-complete" tag="p">
            <span v-for="item in arrList" v-bind:key="item" class="list-complete-item" :class="{'draw-bg': item == value}">
                {{ item }}
            </span>
    </transition-group>
    <hr style="margin: 5% 0 5% 0;width: 41rem">

    <h4>提问评委</h4>
    <button v-on:click="pwStart">抽选</button>
    <button v-on:click="pwEnd">停</button>
    <transition-group name="list-complete" tag="p">
        <span v-for="firstItem in Assessor" v-bind:key="firstItem" class="list-complete-item" :id="firstItem" :class="{'pw1': firstItem == value1}">
                {{ firstItem }}
        </span>
    </transition-group>
    <!--    <h4>一般评委</h4>-->
    <!--    <transition-group name="list-complete" tag="p">-->
    <!--        <span v-for="secondItem in secondAssessor" v-bind:key="secondItem" class="list-complete-item" :id="secondItem">-->
    <!--            {{ secondItem }}-->
    <!--        </span>-->
    <!--    </transition-group>-->

</div>

<script>
    new Vue({
        el: '#list-complete-demo',
        data: {
            arrList: [
            ],
            arrList1: [
            ],
            target: [],
            target1: [],
            index: -1,
            index1: -1,
            timer: null,
            timer1: null,
            value: '',
            value1: '',
            status: true,
            status1: true,
            Assessor : null,
            firstAssessor : null,
            secondAssessor : null
        },
        mounted() {
            this.getUser()

            if (!localStorage.getItem('initData')) {
                localStorage.setItem('initData', JSON.stringify(this.arrList))
            } else {
                this.arrList = JSON.parse(localStorage.getItem('initData'))
            }
            if (localStorage.getItem('drawList')) {
                this.target = JSON.parse(localStorage.getItem('drawList'))
            }

            setInterval(this.getAssessor, 5000);
        },
        methods: {
            init(){

                // 使用confirm函数创建一个弹框
                if (window.confirm('确定要初始化吗？')) {
                    // 如果用户点击了"确定"按钮，则执行相应的操作
                    this.arrList = this.arrList1
                    this.target = []
                    this.index = -1
                    this.timer = null
                    this.value = ''
                    this.value1 = ''
                    this.status = true
                    this.Assessor = null

                    // this.getUser()
                    localStorage.setItem('drawList', '')
                } else {
                    // 如果用户点击了"取消"按钮或者关闭了弹框，则不执行任何操作
                    console.log("用户点击了取消");
                }
            },
            start() {
                this.value1 = ''
                if (this.status) {
                    if (this.index != -1) {
                        this.arrList.splice(this.index, 1)
                        localStorage.setItem('initData', JSON.stringify(this.arrList))
                    }
                    this.shuffle()
                    setTimeout(() => {
                        this.recursive()
                    }, 800)
                    this.status = !this.status
                }
                $('.list-complete-item').css('background-color', '')
            },
            randomIndex: function() {
                this.index = Math.floor(Math.random() * this.arrList.length)
                return this.index
            },
            remove: function() {
                this.arrList.splice(this.randomIndex(), 1)
            },
            shuffle: function() {
                this.arrList = _.shuffle(this.arrList)
            },
            recursive() {
                clearTimeout(this.timer)
                this.timer = setTimeout(() => {
                    this.value = this.arrList[this.randomIndex()]
                    this.recursive()
                }, 200)
            },
            end() {
                if (this.status) {
                    return
                }
                clearTimeout(this.timer)
                this.index = this.randomIndex()
                this.value = this.arrList[this.index]
                this.target.push(this.value)
                localStorage.setItem('drawList', JSON.stringify(this.target))
                this.status = !this.status
                this.sendName(this)
            },
            shuffle1: function() {
                this.Assessor = _.shuffle(this.Assessor)
            },
            recursive1() {
                clearTimeout(this.timer1)
                this.timer1 = setTimeout(() => {
                    this.value1 = this.Assessor[this.randomIndex1()]
                    console.log(this.value1);
                    this.recursive1()
                }, 200)
            },
            randomIndex1: function() {
                this.index1 = Math.floor(Math.random() * this.Assessor.length)
                return this.index1
            },
            pwStart() {
                if (this.status1) {
                    // if (this.index1 != -1) {
                    //     this.Assessor.splice(this.index1, 1)
                    //     localStorage.setItem('Assessor', JSON.stringify(this.Assessor))
                    // }
                    this.shuffle1()
                    setTimeout(() => {
                        this.recursive1()
                    }, 800)
                    this.status1 = !this.status1
                }
                $('.list-complete-item').css('background-color', '')
            },
            pwEnd() {
                if (this.status1) {
                    return
                }
                clearTimeout(this.timer1)
                this.index1 = this.randomIndex1()
                this.value1 = this.Assessor[this.index1]
                // this.target1.push(this.value1)
                // localStorage.setItem('AssessorDrawList', JSON.stringify(this.target1))
                this.status1 = !this.status1
                // this.sendName(this)
            },
            sendName(obj){
                axios({
                    url: 'index.php',
                    method: 'POST',
                    data: {
                        func: 'run',
                        name: this.arrList[this.index]
                    }
                }).then(function (res) {
                    this.Assessor = obj.Assessor = res.data
                    // obj.firstAssessor = res.data.first_Assessor_name
                    // obj.secondAssessor = res.data.second_Assessor_name
                })
            },
            getAssessor(){
                axios({
                    url: 'index.php',
                    method: 'POST',
                    data: {
                        func: 'assessok',
                        name: this.arrList[this.index]
                    }
                }).then(function (res) {
                    for (item in res.data){
                        $('#'+res.data[item]).css('background-color', '#06bd71')
                    }
                })
            },
            getUser() {
                axios({
                    url: 'index.php',
                    method: 'POST',
                    data: {
                        func: 'getUser',
                    }
                }).then((res) => {  // 使用箭头函数
                    this.arrList1 = res.data.data;
                    localStorage.setItem('initData', JSON.stringify(this.arrList1));
                });
            }

        }
    })
</script>
</body>

</html>